<template>
    <div class="page_unReceivedStock">
  
      <van-sticky>
        <van-nav-bar
          :title="'待我领取的股份:'+ total"
          left-arrow
          @click-left="$router.go(backtonum)"
        >
          <template #right>
            <van-button type="info" round size="mini" style="margin-right: 10px;" @click="toReceivedAllStock">全部领取</van-button>
            <van-icon
              :name="!searchBoxShow ? 'search' : 'close'"
              size="20"
              @click="searchBoxShow = !searchBoxShow; toClearKeyWord(!!params.keyword)"
              style="font-size: 20px;"
            />
          </template>
        </van-nav-bar>
  
        <van-search
          v-show='searchBoxShow'
          v-model="params.keyword"
          placeholder="搜索手机号，用户昵称"
          show-action
          shape="round"
          @search="handleSearch"
          @clear="toClearKeyWord"
        >
          <div slot="action" @click="handleSearch">搜索</div>
        </van-search>
  
      </van-sticky>
  
      <div v-if="userInfoList.length" >
        <user-info
          v-for="(item) in userInfoList"
          :itemObj="item"
          :key="item.rowid"
        >
          <div class="right-detail" >
            <!-- <div class="isReceived"><van-tag type="warning">未领取{{item.take_stock}}股</van-tag></div> -->
            <!-- <div class="detail"><van-button type="info" size="small" @click="toApplyDetail(item)" >详情</van-button></div> -->
            <div class="isReceived">
              <van-tag type="warning" v-show="item.receive_status==-1">不可领取</van-tag>
              <van-tag type="warning" v-show="item.receive_status==0">可领取</van-tag>
            </div>
          </div>  
          <template slot="extslot">
            <div>
              <div style="margin:5px 0">领取类型：{{item.receive_type||"未知"}}</div>
              <div style="margin:5px 0">来源类型：{{item.sourcetype||"未知"}}</div>
              <div style="margin:5px 0;white-space: nowrap;">{{item.receive_type}}时间：{{item.receive_time}}</div>
            </div>
          </template>
        </user-info>
  
        <van-pagination
          v-show="total > 0"
          style="margin: 10px 0"
          v-model="params.pageIndex"
          :items-per-page="params.pageSize"
          :total-items="total"
          @change="changePagination"
        >
          <template #prev-text>
            <van-icon name="arrow-left" />
          </template>
          <template #next-text>
            <van-icon name="arrow" />
          </template>
          <template #page="{ text }">{{ text }}</template>
        </van-pagination>
      </div>
  
      <van-divider style="margin-top: 100px" v-else>无记录</van-divider>
      <van-tabbar v-model="active"  fixed placeholder route active-color="#ee0a24" @change="onChange">
        <van-tabbar-item  to="/unReceivedStockbdyh?type=1"  :class="$route.query.type==1?'van-tabbar-item--active':''" icon="gift-o" >主动扫码领取</van-tabbar-item>
        <van-tabbar-item  to="/unReceivedStockbdyh?type=2" :class="$route.query.type==2?'van-tabbar-item--active':''" icon="gift">被动扫码领取</van-tabbar-item>
        <van-tabbar-item  to="/unReceivedStockbdyh?type=3" :class="$route.query.type==3?'van-tabbar-item--active':''" icon="cluster-o">推广用户领取</van-tabbar-item>
        <!-- <van-tabbar-item :class="active==3?'van-tabbar-item--active':''" icon="cluster">推广用户被动领取</van-tabbar-item> -->
  <!--      <van-tabbar-item icon="manager-o" to="/myCompany/companyStaffManagement">公司员工管理</van-tabbar-item>-->
      </van-tabbar>
     <!-- {{ $route.query}} -->
    </div>
  </template>
  
  <script>
  import UserInfo from './components/userInfo';
  import logoImg from '@/assets/logo.png';
  import { Toast,  Dialog, } from "vant";
  import {mapGetters} from "vuex";
import getters from '../../store/getters';
import user from '../../api/user';
  export default {
    name: "unReceivedStock",
    components: {
      UserInfo
    },
    computed:{
      ...mapGetters(['allUserInfo'])
    },
    data(){
      return {
        backtonum:-1,
        active:0,
        name: "receivedStock",
        logoImg,
        userInfoList: [],
        showOverlay: false,
        searchBoxShow: false,
        total: 0,
        params: {
          keyword: '',
          pageIndex: 1,
          pageSize: 20
        },
      }
    },
    watch:{
      '$route.query.type':function (newval,oldval){
        console.log(newval)
        this.backtonum--
        this._getStocks(newval)
      }
    },
    mounted(){
      console.log(this.$route,'this.$router.query')
      this._getStocks(this.$route.query.type);
    },
    methods: {
      onChange(){
  
      },
      async _getStocks(type) {
        let paramsObj = {
          // todo 若是加了分页、关键字搜索等参数，放开注释即可
          ...this.params,
          userId:this.allUserInfo.id,
          takeStatus: 0
        }
        // params.takeStatus = 1 //0未领取; 1已领取
        let res;
        if(type==1){
          res = await this.$api.others.getscanningcodestocklist(paramsObj);
        }else if(type==2){
          res = await this.$api.others.getreceivestockList(paramsObj);
        }else if(type==3){
          res = await this.$api.others.getpromotionstocklist(paramsObj);
        }
        if (res.code === 200){
          this.userInfoList = res.data.stocks || []
          this.total = res.data.count || 0
        };
      },
      handleSearch() {
        this.params.pageIndex = 1
        if(this.params.keyword.trim()){
          this._getStocks()
        } else {
          Toast('请先输入！');
        }
      },
  
      toClearKeyWord(isQuery = true){
        if(!isQuery){
          return
        };
        this.params.keyword = '';
        this.params.pageIndex = 1;
        this.$nextTick(() => {
          this._getStocks(this.$route.query.type);
        })
      },
  
      changePagination(pageIndex) {
        console.log('翻页', pageIndex);
        this.params.pageIndex = pageIndex;
        this._getStocks(this.$route.query.type);
      },
  
      toApplyDetail(item){
        // console.log(item);
        this.$router.push({
          name: 'applyDetail',
          query: {
            applyId: item.applyid,
            applyUserId: item.apply_userid,
          }}
        )
      },
  
      toReceivedAllStock(){
        let userInfo = JSON.parse(localStorage.getItem('userInfo'))
        if(userInfo.certification_state !== 2){
          Dialog.confirm({
            title: '注意',
            message: '您尚未个人认证，请先完成个人认证!',
            confirmButtonText:'去认证'
          })
            .then(() => {
              this.$router.push('/personalAuth')
              // personalAuth
            })
            .catch(() => {
              // on cancel
            });
          return 
        }
        Dialog.confirm({
          title: '温馨提示',
          message: '你确定全部领取吗？',
        }).then(async () => {
            let res;
            // on confirm
            if(this.$route.query.type==1){
              res = await this.$api.others.taskscanningstock({userId:this.allUserInfo.id,collectType:"receive"});
            }else if(this.$route.query.type==2){
              res = await this.$api.others.taskreceivestock({userId:this.allUserInfo.id,collectType:"scann"});
            }else if(this.$route.query.type==3){
              res = await this.$api.others.taskpromotionstock({userId:this.allUserInfo.id,collectType:"receivepar"});
            }
          
          if (res.code === 200){
            // Toast(res?.data || '领取成功！');

            Toast('领取成功！');
            // 重新请求数据
            this.params.keyword = '';
            this.params.pageIndex = 1;
            this._getStocks(this.$route.query.type);
  
          }}).catch(() => {
            // on cancel
          });
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .page_unReceivedStock{
    width: 100%;
    .right-detail{
      text-align: center;
      .isReceived{
        margin-top: 6px;
        /deep/ .van-tag{
          padding: 2px;
        }
      }
      .detail{
        margin-top: 6px;
      }
    }
  }
  .van-tabbar-item{
    font-size:.28rem !important;
    text-align: center;
  }
  
  </style>
  